$(function () {
  let layer = layui.layer;
  let form = layui.form;
  // 将传入的 id 存入隐藏的表单 id 属性中
  let id = location.href.split("=")[1];
  $("[name='Id']").val(id);
  //   initCate();
  // 依据 id 将默认值一一设定
  // 发送 ajax 获得相应的值
  $.ajax({
    method: "GET",
    url: "/my/article/" + id,
    success: (res) => {
      if (res.status !== 0) {
        return layer.msg(res.message);
      }
      // 1. 第一项 title
      $('[name="title"]').val(res.data.title);
      // 2. 第二项 cate_id
      // 2.1 将相应的下拉选项添加 selected 属性
      // 2.1.1 获取下拉菜单选项
      let cate_id = res.data.cate_id;
      // 定义获得下拉菜单选项函数
      function initCate() {
        $.ajax({
          method: "GET",
          url: "/my/article/cates",
          success: (res) => {
            if (res.status !== 0) {
              return layer.msg("初始化文章分类失败！");
            }
            res.cate_id = cate_id;
            let htmlStr = template("tel-cate", res);
            $("[name=cate_id]").html(htmlStr);
            // 一定要记得调用 form.render() 方法
            form.render();
          },
        });
      }
      initCate();
      // 3. 第三项 富文本编辑器
      // 3.1 初始化富文本编辑器
      initEditor();
      // 3.2 修改默认值为 res.data.content
      $("#content").val(res.data.content);
      // 4. 默认图片
      $("#image").attr(
        "src",
        "http://api-breakingnews-web.itheima.net" + res.data.cover_img
      );
      // 4.1 初始化图片裁剪器
      var $image = $("#image");

      // 4.2 裁剪选项
      var options = {
        aspectRatio: 400 / 280,
        preview: ".img-preview",
        viewMode: 2,
      };

      // 4.3 初始化裁剪区域
      $image.cropper(options);
      $("#btnChooseImage").on("click", function () {
        $("#coverFile").click();
      });
      // 监听 coverFile 的 change 事件，获取用户选择的文件列表
      $("#coverFile").on("change", function (e) {
        // 获取到文件的列表数组
        var files = e.target.files;
        // 判断用户是否选择了文件
        if (files.length === 0) {
          return;
        }
        // 根据文件，创建对应的 URL 地址
        var newImgURL = URL.createObjectURL(files[0]);
        // 为裁剪区域重新设置图片
        $image
          .cropper("destroy") // 销毁旧的裁剪区域
          .attr("src", newImgURL) // 重新设置图片路径
          .cropper(options); // 重新初始化裁剪区域
        e.target.value = "";
      });
      // 定义文章发布状态
      let art_state = "已发布";
      // 点击转换为草稿
      $("#btnSave").on("click", function () {
        art_state = "草稿";
      });
      $("#form").on("submit", function (e) {
        // 1. 阻止默认行为
        e.preventDefault();
        // 2. 快速生成 fd 对象
        let fd = new FormData(this);
        // 3. 追加文章发布状态
        fd.append("state", art_state);
        // 4. 将封面裁剪过后的图片，输出为一个文件对象
        $image
          .cropper("getCroppedCanvas", {
            // 创建一个 Canvas 画布
            width: 400,
            height: 280,
          })
          .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到文件对象后，进行后续的操作
            // 5. 将文件对象，存储到 fd 中
            fd.append("cover_img", blob);
            // 6. 发起 ajax 数据请求
            $.ajax({
              method: "POST",
              url: "/my/article/edit",
              data: fd,
              // 注意：如果向服务器提交的是 FormData 格式的数据，
              // 必须添加以下两个配置项
              contentType: false,
              processData: false,
              success: (res) => {
                if (res.status !== 0) {
                  return layer.msg(res.message);
                }
                layer.msg(res.message);
                // 发布文章成功后，跳转到文章列表页面
                // location.href = "/art/art_list.html";
                window.parent.document.querySelector("#art_list").click();
              },
            });
          });
      });
    },
  });
});
